<template>
  <div :class="['AddressSelectionView',showOrHideCls]" :style="{'z-index':z_index}" >
    <div class="back" @click="closeClick()"></div>
    <div class="view" >
      <div class="btnDiv">
        <div class="nobtn" @click="cancelClick()">取消</div>
        <div class="okbtn" @click="determineClick()">确定</div>
      </div>
      <div class="rseffdiv" style=" margin-top: 120px;"></div>
      <div class="domcom" :id="clsid">

      </div>

    </div>
  </div>
</template>



<style scoped>
.AddressSelectionView{
  position: relative;width: 100%;height: 100%;
}
.back{
  position:absolute;left: 0;top:0;width: 7.5rem;height: 18rem;overflow:hidden;background-color: black;opacity: 0.2;
}
.view{
  position: fixed;bottom: 0;
  background-color:#FFFFFF;width: 7.5rem;height:6.6rem;border-top-left-radius: 0.5rem;border-top-right-radius: 0.5rem;
}
.domcom{
  position: absolute;width: 100%;top:1rem;
}
.rseffdiv{
  position: absolute;background-color: #FF9B4F;width: 7.5rem;height: 40px;top:1rem;
}
.btnDiv{
  position: absolute;color: #BBBBBB;font-size: 0.3rem;line-height: 0.36rem;font-weight: 600;width: 6.5rem;left: 0.5rem;top:0.2rem;
}
.btnDiv .nobtn{
  float: left;
}
.btnDiv .okbtn{
  float: right;
}
.myPanel{
  position: absolute;overflow: hidden;display: block;top:0;font-weight: 500;font-size: 26px;color: #000000;width: 100%;
}
.myPanel .ulDiv{
  position: relative;display:flex;display: -webkit-flex;flex-direction:row;
}
.myPanel .ulcls{
  position: relative;width: 3.7rem;
}

.myPanel .ulcls .licls{
  position: relative;font-size: 20px;
}
/**选中**/
.myPanel .ulcls .licls_xz{

}
.myPanel .ulcls .licls .lidiv{

}
/**选中**/
.myPanel .ulcls .licls_xz{
  color: #FFFFFF;
}
.myPanel .shadowup{
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 50;
  background: -webkit-linear-gradient(to bottom,#FFF,rgba(255,255,255,.6));
  background: linear-gradient(to bottom,#FFF,rgba(255,255,255,.6));
  pointer-events: none;
  border-bottom: 1px solid #efefef;
}
.myPanel .shadowdown{
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 50;
  bottom: 0;
  background: -webkit-linear-gradient(to top,#FFF,rgba(255,255,255,.6));
  background: linear-gradient(to top,#FFF,rgba(255,255,255,.6));
  pointer-events: none;
  border-top: 1px solid #efefef
}

</style>

<script setup>
import Enum from "@/gamejs/Enum";
import Util from "@/gamejs/Util";
import AddressData from "@/gamejs/AddressData";
import BottoMSelection from "@/gamejs/BottoMSelection";
import {ref, onMounted, onBeforeUnmount, onUnmounted,watch,computed} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';

let store = useStore();
let clsid=winApp.getClsId();
/**数据集合ID**/
let DataId_ID=Enum.no_txt+'addselect7658674';
let router = useRouter();




/*组件挂载完成后执行的函数；*/
onMounted(() => {
  // let className=document.getElementById(clsid).attributes;
  let scopeId=document.getElementById(clsid+'').attributes[0].name;
  console.log("AddressSelectionView onMounted  地址选择",scopeId,clsid);
  setInitDate(scopeId);
});
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("AddressSelectionView onUnmounted  卸载组件实例后 ",clsid);

});

let z_index=ref(0);
//挂载状态
let showView_status=computed(()=>{return store.state.view.addressPanel;});
//显示隐藏class
let showOrHideCls=ref('');
watch(showView_status,(newValue,oldValue)=>{
  console.log("AddressSelectionView watch  showView_status===",newValue);
  if(newValue===Enum.view_status_1){//显示
    showOrHideCls.value='viewShow';
    store.state.view.viewZindex++;
    z_index.value=store.state.view.viewZindex;
    setInitDate();
  }
  if(newValue===Enum.view_status_2){//隐藏
    showOrHideCls.value='viewHide';
  }
});



function cancelClick(){
  console.log("AddressSelectionView cancelClick 取消");
  closeClick();
}
function determineClick(){
  console.log("AddressSelectionView determineClick 确定");


  let rslist=BottoMSelection.getSelectRS(DataId_ID,1);
  store.state.addData=rslist;
  console.log("AddressSelectionView determineClick 确定",rslist);
  closeClick();


}
function closeClick(){
  store.state.view.addressPanel=Enum.view_status_2;
}







/**
 *
 * @param data {dataindex，listIndex}
 */
function moveRsFun(data){
  console.log('AddressSelectionView moveRsFun ',DataId_ID,data);
  let dataindex=parseInt(data.dataindex);
  let listIndex=parseInt(data.listIndex);
  if(dataindex==0 && dataindex!=shengIndex && shengIndex!=-1){//省
    let rslist=BottoMSelection.getSelectRS(DataId_ID,1);
    upDayFun(rslist[0].value);
  }
}

/**
 * @param value
 */
function upDayFun(value){

  BottoMSelection.setMouList(DataId_ID,1,AddressData['_'+value]);
 // console.log('AddressSelectionView upDayFun ',value);
}
let shengIndex=-1;
function setInitDate(scopeId){
  console.log('AddressSelectionView setInitDate');
  if(!BottoMSelection.getData(DataId_ID,1)){
    console.log('AddressSelectionView setInitDate 初始');
    let adddata=[{id:0,list:AddressData.sheng},{id:1,list:AddressData['_110000']}];
    let _height=40;
    let _itemLen=7;
    DataId_ID=BottoMSelection.create(adddata,moveRsFun,_height,_itemLen);
  }
  if(!BottoMSelection.getIsInitHtml(DataId_ID)){
    BottoMSelection.initUlelement(DataId_ID,scopeId,clsid);
  }

  shengIndex=3;
  BottoMSelection.setdataValue(0,AddressData.sheng[shengIndex].value,DataId_ID,0);
  BottoMSelection.setdataValue(1,AddressData['_110000'][4].value,DataId_ID,0);
  store.state.addData=BottoMSelection.getSelectRS(DataId_ID,1);
 // console.log('AddressSelectionView setInitDate 初始',store.state.addData);
}



</script>
